<template>
	<view class="ww" style="padding: 30rpx 40rpx;">
		<view class="list-wrap">
			<view class="wrap">
				<view class="list-title">
					设置
				</view>
				<view class="list-msg">
					<view class="list-msg-mag dis" v-for="(item,index) in list" @click="goPages(item.url)">
						<view class="list-msg-mag-left dis">
							<view class="list-msg-mag-left-img">
								<image :src="item.icon" mode=""></image>
							</view>
							<view>{{item.tit}}</view>


						</view>
						<view class="list-msg-mag-right">
							<image src="@/static/my/icon_you.png" mode=""></image>

						</view>

					</view>
					<!-- <image src="" mode=""></image> -->

				</view>
			</view>

		</view>
		<view class="btn" @click="submit">
			退出登录
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance();
	import {
		loginOut,
		loginoff
	} from '@/api/index.js'
	let list = ref([{
			url: '/pagesC/myList/shzc',
			icon: '../../static/my/icon_qchc.png',
			tit: '设置缓存'
		},
		{
			url: '/pagesC/myList/xyzx',
			icon: '../../static/my/icon_xyzx.png',
			tit: '协议中心'
		},
		{
			url: '',
			icon: '../../static/my/icon_zxzh.png',
			tit: '注销账户'
		}
	])
	let goPages = (url) => {
		if (url == '') {
			uni.showModal({
				title: '注销提醒',

				cancelColor: '#3C75F2',
				confirmColor: '#999',

				content: '您确定注销该账号吗，注销后数据无法恢复',
				success: function(res) {
					if (res.confirm) {
						loginoffBtn()
						console.log('用户点击确定');
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});

		} else {
			uni.navigateTo({
				url
			})
		}

	}
	let submit = () => {
		uni.showModal({
			title: '退出提醒',

			content: '确定退出登录吗',
			success: function(res) {
				if (res.confirm) {
					console.log("调接口清缓存")
					loginOutBtn()


				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});

	};
	let loginoffBtn=async()=>{
		let res = await loginoff()
		if (res) {
		
			proxy.$ts('退出成功')
			uni.removeStorageSync("token");
			uni.removeStorageSync("tokens");
			uni.removeStorageSync('userInfo');
			uni.reLaunch({
				url: '/pages/login/index'
			});
		}
	}
	let loginOutBtn = async () => {

		let res = await loginOut()
		if (res) {
		
			proxy.$ts('退出成功')
			uni.removeStorageSync("token");
			uni.removeStorageSync("tokens");
			uni.removeStorageSync('userInfo');
			uni.reLaunch({
				url: '/pages/login/index'
			});
		}



	}
</script>
<style>
	page {
		background: #F3F4F5 !important;
		/* padding: 0 28rpx; */
	}
</style>
<style lang="scss" scoped>
	.btn {
		width: 80%;
		margin: 0 auto;
		margin-top: 100rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 36rpx;
		background: $mian-color;
		border-radius: 100rpx;
	}

	.wrap {
		width: 85%;
		margin: 0 auto;
	}

	.list-wrap {
		.list-msg {
			.list-msg-mag {
				.list-msg-mag-right {
					width: 16rpx;
					height: 28rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.list-msg-mag-left {
					align-items: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;

					.list-msg-mag-left-img {
						margin-right: 20rpx;

						image {
							width: 32rpx;
							height: 32rpx;
							vertical-align: middle;
						}
					}

				}

				line-height: 100rpx;
				justify-content: space-between;

				border-top: 2rpx solid #EDEDED;
			}
		}

		.list-title {
			line-height: 100rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 550;
			font-size: 32rpx;
			color: #000000;
		}

		background: #fff;
		border-radius: 10rpx;
		margin: 0 auto;

	}
</style>